<template>
  <view class="main">
    <view class="ip-item" v-for="(item, index) in formList" :key="index">
      <input
        type="text"
        v-if="item.value1 != 'avatar'"
        :placeholder="item.name"
        placeholder-class="ip"
        :disabled="
          item.value1 == 'city' ||
          item.value1 == 'birthday' ||
          item.value1 == 'avatar'
        "
        v-model="item.value2"
      />
      <view
        v-if="item.value1 == 'avatar'"
        @click="uploadAvatar"
        style="font-size: 32rpx; color: #bbbbbb; width: 100%; height: 100%"
        >头像</view
      >
      <view class="avatar" v-if="item.value1 == 'avatar'">
        <image :src="item.value2" mode="aspectFill" @click="uploadAvatar" />
      </view>

      <image
        src="/static/icon/down.svg"
        mode="widthFix"
        v-if="item.value1 == 'city' || item.value1 == 'birthday'"
      />
      <!-- <textarea v-if="item.textA" maxlength="300" type="text" :placeholder="item.value1" placeholder-class="ip"
                class="text-area" v-model="item.value" /> -->

      <view
        class="block"
        v-if="item.value1 == 'city' || item.value1 == 'birthday'"
        @click="select(item, index)"
      >
      </view>
    </view>
  </view>
  <view class="btns">
    <Button
      @clickButton="carete"
      :loading="loading"
      loading-text="提交中"
      text="提交"
    />
    <Button
      @clickButton="goPage"
      style="
        margin-top: 15px;
        background: white;
        border-color: #dcdee0;
        color: #323233;
      "
      text="稍后填写"
    />
  </view>

  <!-- 性别 -->
  <van-popup v-model:show="showPickerSex" round position="bottom">
    <van-picker
      :columns="columns"
      @cancel="showPickerSex = false"
      @confirm="onConfirm"
    />
  </van-popup>

  <!-- 生日 -->
  <van-popup v-model:show="birthdayShow" round position="bottom">
    <van-date-picker
      v-model="currentDate"
      @confirm="birthdayConfirm"
      title="生日"
      :min-date="expireDate"
      :max-date="maxDate"
    />
  </van-popup>

  <!-- 城市 -->
  <van-popup v-model:show="cityShow" round position="bottom">
    <van-area title="常驻城市" :area-list="areaList" @confirm="cityConfirm" />
  </van-popup>
</template>

<script setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { areaList } from "@vant/area-data";
import { uploadImage, deleteObjectEmptyKey } from "@/utils/util";
import { fillCircle, addMember } from "@/api/apiList";

// 头像上传
const uploadAvatar = async () => {
  const res = await uploadImage(1);
  const index = formList.value.findIndex((item) => item.value1 == "avatar");
  formList.value[index].value2 = res[0];
};

// 城市
const cityShow = ref(false);
const cityConfirm = (data) => {
  const arr = ref([]);
  data.selectedOptions.forEach((item) => arr.value.push(item.text));
  const index = formList.value.findIndex((item) => item.value1 == "city");
  formList.value[index].value2 = arr.value.join("-");
  cityShow.value = false;
};

// 生日
const maxDate = new Date(2099, 5, 1);
const expireDate = new Date(1940, 1, 1);
const currentDate = ref([
  new Date().getFullYear(),
  new Date().getMonth() + 1,
  new Date().getDate(),
]);
const birthdayShow = ref(false);
const birthdayConfirm = (data) => {
  const index = formList.value.findIndex((item) => item.value1 == "birthday");
  formList.value[index].value2 = data.selectedValues.join("-");
  birthdayShow.value = false;
};

// 选择弹窗
const select = (item, _index) => {
  console.log(item, "item");
  const { value1 } = item;
  switch (value1) {
    case "birthday":
      birthdayShow.value = true;
      break;
    case "city":
      cityShow.value = true;
      break;
  }
};

const formList = ref([]);
const id = ref("");
onLoad((option) => {
  id.value = option.id ? option.id : "";
  getForm();
});

// 请求表单项目
const getForm = async () => {
  const result = await fillCircle({ id: id.value });
  if (result.code == 200) {
    formList.value = result.data;
  }
};

const loading = ref(false);
const carete = async () => {
  let formData = {};
  for (const key in formList.value) {
    if (Object.prototype.hasOwnProperty.call(formList.value, key)) {
      const element = formList.value[key];
      if (!formData[element.value1]) {
        formData[element.value1] = element.value2;
        console.log(formData[element.value1], element.value2, element);
        if (
          element.name == "手机号" ||
          element.name == "名称" ||
          element.name == "头像" ||
          element.name == "城市"
        ) {
          if (!element.value2) {
            if (!formData[element.value1]) {
              uni.showToast({
                title: element.name + "不能为空",
                icon: "none",
              });
              return;
            }
          }
        }
      }
    }
  }
  formData.circleId = id.value;
  formData.isFill = 1;
  const res = await addMember(formData);
  loading.value = true;
  if (res.code == 200) {
    uni.showToast({
      title: "提交成功",
      icon: "none",
    });
    setTimeout(() => {
      loading.value = false;
      uni.navigateTo({
        url: `/pages/circle/pages/groupConsole?id=${id.value}`,
      });
    }, 1000);
  }
  console.log(formData, "ffff");
};

const goPage = () => {
  uni.navigateTo({
    url: `/pages/circle/pages/groupConsole?id=${id.value}`,
  });
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx 30rpx 200rpx 30rpx;
}

.must {
  color: #aaaaaa;
}

.active {
  color: #0753fd !important;
}

.btns {
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

.pop-main {
  .pop-title {
    border-bottom: 1rpx solid #eee;
    padding: 34rpx 40rpx;

    .cancel,
    .confirm {
      font-family: PingFang SC Bold;
      font-size: 32rpx;
    }

    .cancel {
      color: #aaaaaa;
    }

    .confirm {
      color: #0753fd;
    }
  }

  .list {
    padding: 0 40rpx;

    .scroll-Y {
      height: 1000rpx;
      max-height: 1000rpx;

      .item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        padding: 25rpx 0;
      }
    }
  }
}
</style>
